<template>
  <!-- 配料表 -->
  <div class="ingredient">
    <el-form ref="ingredientform" :model="ingredientform" label-width="110px" size="small">
      <div class="baseinfo">
        <div class="left">
          <el-form-item label="食品名称" required>
            <el-input v-model.trim="ingredientform.foodName" style="width:300px" class='name' type="textarea" clearable
              maxlength="35" show-word-limit @input="editChange($event)">
            </el-input>
            <i class="el-icon-circle-close" v-if='ingredientform.foodName' style="padding-left: 5px;" @click="clearname"></i>
          </el-form-item>
          <el-form-item label="配料表" required>
            <el-input v-model.trim="ingredientform.ingredient" style="width:300px" type="textarea" clearable maxlength="240"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>
          <el-form-item label="净含量" required>
            <el-input v-model.trim="ingredientform.netContent" style="width:300px" clearable maxlength="8"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>

          <el-form-item label="保质期" required>
            <el-input v-model.trim="ingredientform.term" style="width:300px" clearable maxlength="5" show-word-limit
              @input="editChange($event)"></el-input>
          </el-form-item>
          <el-form-item label="加工方式" required>
            <el-input v-model.trim="ingredientform.processingMode" style="width:300px" clearable maxlength="10"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>

          <el-form-item label="产品类别" required>
            <el-input v-model.trim="ingredientform.productCategory" style="width:300px" clearable maxlength="10"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="贮存条件" required>
            <el-input v-model.trim="ingredientform.storageConditions" style="width:300px" clearable maxlength="10"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>
          <el-form-item label="食用方法" required>
            <el-input v-model.trim="ingredientform.edibleMethods" style="width:300px" clearable maxlength="10"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>
          <el-form-item label="致敏物提示" required>
            <el-input v-model.trim="ingredientform.sensitizerTips" style="width:300px" clearable maxlength="50" type="textarea"
              show-word-limit @input="editChange($event)"></el-input>
            <i class="el-icon-circle-close" v-if='ingredientform.sensitizerTips' style="padding-left: 5px;" @click="handlesensitizerTips"></i>
          </el-form-item>
          <el-form-item label="联系方式" required>
            <el-input v-model.trim="ingredientform.contactInformation" style="width:300px" clearable maxlength="15"
              show-word-limit @input="editChange($event)"></el-input>
          </el-form-item>
          <el-form-item label="食品生产许可证编号" class="licence" required>
            <el-input v-model.trim="ingredientform.licence" style="width:300px" clearable maxlength="20" type="textarea"
              show-word-limit @input="editChange($event)"></el-input>
            <i class="el-icon-circle-close" v-if='ingredientform.licence' style="padding-left: 5px;" @click="clearnumbering"></i>
          </el-form-item>
          <el-form-item label="产品实行标准" class="numbering" required>
            <el-input v-model.trim="ingredientform.executiveStandards" style="width:300px" clearable maxlength="12"
              show-word-limit @input="editChange($event)"></el-input>
            <i class="el-icon-circle-close" v-if='ingredientform.executiveStandards' style="padding-left: 5px;" @click="clearstandards"></i>
          </el-form-item>
        </div>
      </div>
      <div class="nutrition">
        <h4>营养成分表</h4>
        <div class="item">
          <ul>
            <li>项目</li>
            <li>每100克(g)</li>
            <li>NRV%</li>
          </ul>
        </div>
        <!-- 必填 -->
        <div class="iteminfo" v-for="item in ingredientform.goodsSkuProductionNutrientsList">
          <el-input v-model.trim="item.item" style="width:140px" maxlength="5" size="small" show-word-limit @input="editChange($event)"></el-input>
          <el-input v-model.trim="item.content" style="width:230px" maxlength="10" size="small" show-word-limit
            clearable @input="editChange($event)"></el-input>
          <el-input v-model.trim="item.percentage" style="width:120px" maxlength="4" size="small" show-word-limit
            clearable @input="editChange($event)"></el-input>
        </div>
        <!-- 选填 -->
        <div class="iteminfooptional" v-for="item in ingredientform.goodsSkuProductionNutrientsExtList">
          <el-input v-model.trim="item.item" style="width:140px" maxlength="5" size="small" show-word-limit clearable
            @input="editChange($event)"></el-input>
          <el-input v-model.trim="item.content" style="width:230px" maxlength="10" size="small" show-word-limit
            clearable @input="editChange($event)"></el-input>
          <el-input v-model.trim="item.percentage" style="width:120px" maxlength="4" size="small" show-word-limit
            clearable @input="editChange($event)"></el-input>
        </div>
      </div>
      <el-form-item class="footer">
        <el-button type="primary" @click="handleSaveingredient('ingredientform',ingredientform)">保存</el-button>
        <el-button @click="handlechanleIngredient('ingredientform',ingredientform)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    props: {
      eidtingredient: {
        required: true,
        type: Object
      },
    },
    watch: {
      eidtingredient: {
        immediate: true, // 这句重要
        handler(val) {
          this.ingredientform = val;
        }
      },
    },
    data() {
      return {
        ingredientform: {
          materielState: 1,
          foodName: '', //蛋糕名称
          ingredient: '', //配料表
          netContent: '', //净含量
          term: '1天', // 保质期
          processingMode: '冷加工', // 加工方式
          productCategory: '', // 产品类别
          storageConditions: '0-5℃冷藏保存', // 储存条件
          edibleMethods: '开盒即食', // 食用方法
          // manufacturer: '', // 生产商
          sensitizerTips: '含有麸质的谷物及制品、蛋类及其制品、大豆及其制品、乳及乳制品', // 致敏物提示
          contactInformation: '952014', //联系方式
          licence: 'SC12444060400576', //食品生产许可证编号
          executiveStandards: 'GB/T 31059', //产品执行标准
          goodsSkuProductionNutrientsList: [{
              item: '能量',
              content: '',
              percentage: '',
              isExt: 0,
            },
            {
              item: '蛋白质',
              content: '',
              percentage: '',
              isExt: 0,
            },
            {
              item: '脂肪',
              content: '',
              percentage: '',
              isExt: 0,
            },
            {
              item: '碳水化合物',
              content: '',
              percentage: '',
              isExt: 0,
            },
            {
              item: '钠',
              content: '',
              percentage: '',
              isExt: 0,

            },
          ],
          goodsSkuProductionNutrientsExtList: [{
            item: '',
            content: '',
            percentage: '',
            isExt: 1,
          }, {
            item: '',
            content: '',
            percentage: '',
            isExt: 1,
          }],

        },

        // rules: {
        //   foodName: [{
        //     required: true,
        //     message: '请输入蛋糕名称',
        //     trigger: 'blur'
        //   }, ],
        //   ingredient: [{
        //     required: true,
        //     message: '请输入配料表',
        //     trigger: 'blur'
        //   }, ],
        //   netContent: [{
        //     required: true,
        //     message: '请输入净含量',
        //     trigger: 'blur'
        //   }, ],
        //   term: [{
        //     required: true,
        //     message: '请输入保质期',
        //     trigger: 'blur'
        //   }, ],
        //   processingMode: [{
        //     required: true,
        //     message: '请输入加工方式',
        //     trigger: 'blur'
        //   }, ],
        //   productCategory: [{
        //     required: true,
        //     message: '请输入产品类别',
        //     trigger: 'blur'
        //   }, ],
        //   storageConditions: [{
        //     required: true,
        //     message: '请输入贮存条件',
        //     trigger: 'blur'
        //   }, ],
        //   edibleMethods: [{
        //     required: true,
        //     message: '请输入食用方法',
        //     trigger: 'blur'
        //   }, ],
        //   sensitizerTips: [{
        //     required: true,
        //     message: '请输入致敏物提示',
        //     trigger: 'blur'
        //   }, ],
        //   contactInformation: [{
        //     required: true,
        //     message: '请输入联系方式',
        //     trigger: 'blur'
        //   }, ],

        //   licence: [{
        //     required: true,
        //     message: '请输入食品生产许可证编号',
        //     trigger: 'blur'
        //   }, ],
        //   executiveStandards: [{
        //     required: true,
        //     message: '请输入产品执行标准',
        //     trigger: 'blur'
        //   }, ],
        // },

      }
    },
    mounted() {},
    methods: {
      editChange() {
        this.$forceUpdate()
      },
      formValid() {
        const valid = this.ingredientform.goodsSkuProductionNutrientsExtList.find(item => {
          if (item.item && (!item.content || !item.percentage)) {
            this.$message({
              message: '请输入当前行对应值',
              type: 'warning'
            });
            return item
          }
          if (item.content && (!item.item || !item.percentage)) {
            this.$message({
              message: '请输入当前行对应值',
              type: 'warning'
            });
            return item
          }
          if (item.percentage && (!item.item || !item.content)) {
            this.$message({
              message: '请输入当前行对应值',
              type: 'warning'
            });
            return item
          }
        });
        return valid ? valid : 'pass'
      },
      handleSaveingredient(formName, item) {
        if (!item.foodName) {
          this.$message({
            message: '请输入食品名称',
            type: 'warning'
          });
          return false;
        }
        if (!item.ingredient) {
          this.$message({
            message: '请输入配料表',
            type: 'warning'
          });
          return false;
        }
        if (!item.netContent) {
          this.$message({
            message: '请输入净含量',
            type: 'warning'
          });
          return false;
        }
        if (!item.term) {
          this.$message({
            message: '请输入保质期',
            type: 'warning'
          });
          return false;
        }
        if (!item.processingMode) {
          this.$message({
            message: '请输入加工方式',
            type: 'warning'
          });
          return false;
        }
        if (!item.productCategory) {
          this.$message({
            message: '请输入产品类别',
            type: 'warning'
          });
          return false;
        }
        if (!item.storageConditions) {
          this.$message({
            message: '请输入食用方法',
            type: 'warning'
          });
          return false;
        }
        if (!item.edibleMethods) {
          this.$message({
            message: '请输入贮存条件',
            type: 'warning'
          });
          return false;
        }
        if (!item.sensitizerTips) {
          this.$message({
            message: '请输入致敏物提示',
            type: 'warning'
          });
          return false;
        }
        if (!item.contactInformation) {
          this.$message({
            message: '请输入联系方式',
            type: 'warning'
          });
          return false;
        }
        if (!item.licence) {
          this.$message({
            message: '请输入食品生产许可证编号',
            type: 'warning'
          });
          return false;
        }
        if (!item.executiveStandards) {
          this.$message({
            message: '请输入产品执行标准',
            type: 'warning'
          });
          return false;
        }
        console.log("goodsSkuProductionNutrientsList", item)
        if (item.goodsSkuProductionNutrientsList && item.goodsSkuProductionNutrientsList.length > 0) {
          const gramsValid = item.goodsSkuProductionNutrientsList.every(item => {
            return item.content;
          });
          const nrvValid = item.goodsSkuProductionNutrientsList.every(item => {
            return item.percentage;
          });
          if (!gramsValid) {
            this.$message({
              message: '请输入项目对应的每100克(g)的值',
              type: 'warning'
            });
            return false;
          } else if (!nrvValid) {
            this.$message({
              message: '请输入项目对应的NRV%的值',
              type: 'warning'
            });
            return false;
          }
        }
        if (this.formValid() == 'pass') {
          this.$emit('eidtingredientedit', item);
          // this.resetFrom(formName);

        }


      },
      //取消
      handlechanleIngredient(formName, item) {
        this.$emit("closeeidt");
        this.resetFrom(formName);
      },
      resetFrom(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
        this.ingredientform = {
          materielState: 1,
          foodName: '', //蛋糕名称
          ingredient: '', //配料表
          netContent: '', //净含量
          term: '1天', // 保质期
          processingMode: '冷加工', // 加工方式
          productCategory: '', // 产品类别
          storageConditions: '0-5℃冷藏保存', // 储存条件
          edibleMethods: '开盒即食', // 食用方法
          // manufacturer: '', // 生产商
          sensitizerTips: '含有麸质的谷物及制品、蛋类及其制品、大豆及其制品、乳及乳制品', // 致敏物提示
          contactInformation: '952014', //联系方式
          licence: 'SC12444060400576', //食品生产许可证编号
          executiveStandards: 'GB/T 31059', //产品执行标准
          goodsSkuProductionNutrientsList: [{
              item: '能量',
              content: '',
              percentage: '',
            },
            {
              item: '蛋白质',
              content: '',
              percentage: '',
            },
            {
              item: '脂肪',
              content: '',
              percentage: '',
            },
            {
              item: '碳水化合物',
              content: '',
              percentage: '',
            },
            {
              item: '钠',
              content: '',
              percentage: '',
            },
          ],
          goodsSkuProductionNutrientsExtList: [{
            item: '',
            content: '',
            percentage: '',
            isExt: 1,
          }, {
            item: '',
            content: '',
            percentage: '',
            isExt: 1,
          }],

        }
      },
      //文本框清空功能
      clearname() { //商品名称
        this.ingredientform.foodName = '';
        this.$forceUpdate()
      },
      clearnumbering() { //许可证
        this.ingredientform.licence = '';
        this.$forceUpdate()
      },
      clearstandards() { //产品实行标准
        this.ingredientform.executiveStandards = '';
        this.$forceUpdate()
      },
      handlesensitizerTips() { //致敏物
        this.ingredientform.sensitizerTips = '';
        this.$forceUpdate()
      }

    }

  }
</script>

<style lang='scss'>
  .ingredient {

    .el-textarea .el-input__count {
      background: transparent !important;

    }

    .el-textarea__inner {
      padding-right: 50px;
    }

    .baseinfo {
      /* .el-form-item {
        margin-bottom: 4px;
      } */

      display: flex;
      justify-content: space-around;

      .left {
        .el-input .el-input__count .el-input__count-inner {
          background: transparent !important;
        }
      }

      .right {
        .numbering {
          .el-form-item__label {
            line-height: 24px !important;
          }
        }

        .el-input .el-input__count .el-input__count-inner {
          background: transparent !important;

        }
      }

    }

    .nutrition {
      margin-bottom: 10px;

      .item ul {
        width: 440px;
        display: flex;
        list-style: none;
        justify-content: space-between;
      }

      .iteminfo {
        width: 530px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;

      }

      .iteminfo:before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
        line-height: 32px;
      }

      .iteminfooptional {
        width: 505px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        margin-left: 23px;
      }
    }

    .footer {
      justify-content: flex-end;
      display: flex;
    }
  }
</style>
